import * as api from '@/services/report';
import * as utils from '@/utils/utils';
import { PageContainer } from '@ant-design/pro-components';
import { ProFormInstance } from '@ant-design/pro-form';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Space, Statistic, Tag } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useRef } from 'react';
dayjs.extend(customParseFormat);
const dateFormat = 'YYYY-MM-DD';

const VpnGroupTreeList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  let regEnd = dayjs().format(dateFormat); //Date.now();
  let regBegin = dayjs().add(-7, 'day').format(dateFormat); //Date.now() - 1000 * 60 * 60 * 24 * 7
  console.log(regBegin, regEnd);

  const loadData = async (
    params: { [key: string]: any },
    sorter?: { [key: string]: any },
    filter?: { [key: string]: any },
  ) => {
    const result = await api.saleStat(params, undefined, filter);
    // if (result.success) {
    // }

    return Promise.resolve(result);
  };

  const displayCount = (
    list: number[] | undefined,
    pos: number,
    total: number,
  ) => {
    let defVal = '-';
    if (!list) return defVal;
    if (list.length < pos) return defVal;
    if (list[pos] == -1) return defVal;
    return (
      <>
        {utils.formatNumber(list[pos])}{' '}
        <Tag>
          {list[pos] == 0 ? '0%' : `${((list[pos] * 100) / total).toFixed(2)}%`}
        </Tag>
      </>
    );
  };

  const getText = (amount: number, count: number) => {
    let ret = (
      <div>
        {utils.formatNumber(amount)}{' '}
        <span style={{ fontSize: 14, color: 'gray' }}>
          / {utils.formatNumber(count)}
        </span>
      </div>
    );

    return ret;
  };

  const getPrefix = (amount: number | undefined, count: number | undefined) => {
    return (
      <div style={{ fontSize: 14 }}>
        {amount ?? 0}
        <span style={{ fontSize: 14, color: '#999' }}>/{count ?? 0}</span>
      </div>
    );
    //return <div style={{ fontSize: 14, color: '#666'}}>{amount ?? 0}<span style={{ fontSize: 14 }}>/{count ?? 0}</span></div>
    //return <div style={{ fontSize: 14}}>{amount ?? 0}/{count ?? 0}</div>
  };
  const getPrefixEx = (
    title: string | undefined,
    amount: number | undefined,
    count: number | undefined,
  ) => {
    return (
      <div style={{ fontSize: 14 }}>
        {title}: {amount ?? 0}
        <span style={{ fontSize: 14, color: '#999' }}>/{count ?? 0}</span>
      </div>
    );
  };

  // const getTitle = (addText : string|undefined, newCount:number|undefined, oldCount:number|undefined) => {
  //   if(addText){
  //     let odds = (newCount ?? 0) - (oldCount ?? 0);
  //     return (
  //       <>
  //         <div style={{ fontSize: 14, color: 'gray' }}>
  //         {addText}
  //                 {utils.formatNumber(odds)}　[{utils.formatNumber((oldCount ?? 0))}]
  //         </div>
  //       </>
  //     );
  //   }
  //   else{
  //     return <></>
  //   }
  // }

  let columns: ProColumns<API.SaleStatItem>[] = [
    {
      title: '日期',
      align: 'center',
      dataIndex: 'title',
      hideInSearch: true,
    },
    {
      title: '总金额',
      align: 'center',
      // width:150,
      dataIndex: 'amount',
      hideInSearch: true,
      renderText: (val) => {
        return utils.formatNumber(val);
      },
    },
    {
      title: '总数',
      align: 'center',
      // width:100,
      dataIndex: 'count',
      hideInSearch: true,
      renderText: (val) => {
        return utils.formatNumber(val);
      },
    },
    {
      title: '新增',
      align: 'center',
      // width:150,
      dataIndex: 'saleCount',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={getPrefix(
              record.subscribe?.amount,
              record.subscribe?.count,
            )}
          />
        );
      },
    },
    {
      title: '新增渠道',
      align: 'center',
      // width:150,
      dataIndex: 'saleChannel',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={
              <>
                {record.subscribe?.channels.map((val) => {
                  return getPrefixEx(val.title, val.amount, val.count);
                })}
              </>
            }
          />
        );
      },
    },
    {
      title: '新增类型',
      align: 'center',
      // width:150,
      dataIndex: 'saleServices',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={
              <>
                {record.subscribe?.services.map((val) => {
                  return getPrefixEx(val.title, val.amount, val.count);
                })}
              </>
            }
          />
        );
      },
    },

    {
      title: '续费',
      align: 'center',
      // width:150,
      dataIndex: 'renewCount',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={getPrefix(record.renews?.amount, record.renews?.count)}
          />
        );
      },
    },
    {
      title: '续费渠道',
      align: 'center',
      // width:150,
      dataIndex: 'renewsChannel',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={
              <>
                {record.renews?.channels.map((val) => {
                  return getPrefixEx(val.title, val.amount, val.count);
                })}
              </>
            }
          />
        );
      },
    },
    {
      title: '续费类型',
      align: 'center',
      // width:150,
      dataIndex: 'renewsServices',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={
              <>
                {record.renews?.services.map((val) => {
                  return getPrefixEx(val.title, val.amount, val.count);
                })}
              </>
            }
          />
        );
      },
    },

    {
      title: 'Token',
      align: 'center',
      // width:150,
      dataIndex: 'tokenCount',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={getPrefix(record.token?.amount, record.token?.count)}
          />
        );
      },
    },
    {
      title: 'Token类型',
      align: 'center',
      // width:150,
      dataIndex: 'tokenServices',
      hideInSearch: true,
      render: (_, record) => {
        return (
          <Statistic
            value={''}
            valueStyle={{
              fontSize: 0,
            }}
            prefix={
              <>
                {record.token?.services.map((val) => {
                  return getPrefixEx(val.title, val.amount, val.count);
                })}
              </>
            }
          />
        );
      },
    },

    // {
    //   title: 'googleplay新增',
    //   align: 'center',
    //   // width:120,
    //   dataIndex: '',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return getText(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 0 ? record.data[0].data[0].amount : 0,
    //       record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 0 ? record.data[0].data[0].count : 0);
    //   },
    // },
    // {
    //   title: 'appstore新增',
    //   align: 'center',
    //   // width:120,
    //   dataIndex: '',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return getText(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 1 ? record.data[0].data[1].amount : 0,
    //       record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 1 ? record.data[0].data[1].count : 0);
    //   },
    // },
    // {
    //   title: 'portal新增',
    //   align: 'center',
    //   // width:120,
    //   dataIndex: '',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return getText(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 2 ? record.data[0].data[2].amount : 0,
    //       record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 2 ? record.data[0].data[2].count : 0);
    //   },
    // },

    // {
    //   title: 'googleplay续费',
    //   align: 'center',
    //   // width:120,
    //   dataIndex: '',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return getText(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 0 ? record.data[1].data[0].amount : 0,
    //       record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 0 ? record.data[1].data[0].count : 0);
    //   },
    // },
    // {
    //   title: 'appstore续费',
    //   align: 'center',
    //   // width:120,
    //   dataIndex: '',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return getText(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 1 ? record.data[1].data[1].amount : 0,
    //       record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 1 ? record.data[1].data[1].count : 0);
    //   },
    // },
    // {
    //   title: 'portal续费',
    //   align: 'center',
    //   // width:120,
    //   dataIndex: '',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return getText(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 2 ? record.data[1].data[2].amount : 0,
    //       record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 2 ? record.data[1].data[2].count : 0);
    //   },
    // },
  ];

  let columns2: ProColumns<API.SaleStatItem>[] = [
    // {
    //   title: '日期',
    //   align: 'center',
    //   dataIndex: 'title',
    //   hideInSearch:true,
    // },
    // // {
    // //   title: '总数',
    // //   align: 'center',
    // //   dataIndex: 'total',
    // //   hideInSearch:true,
    // //   children:[
    //     {
    //       title: '总数量',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'count',
    //       hideInSearch:true,
    //       renderText: (val) => {
    //         // return <span style={{color:'blue'}}>{utils.formatNumber(val)}</span>;
    //         return utils.formatNumber(val);
    //       },
    //     },
    //     {
    //       title: '总金额',
    //       align: 'center',
    //       // width:150,
    //       dataIndex: 'amount',
    //       hideInSearch:true,
    //       renderText: (val) => {
    //         // return <span style={{color:'blue'}}>{utils.formatNumber(val)}</span>;
    //         return utils.formatNumber(val);
    //       },
    //     },
    //     // Table.EXPAND_COLUMN,
    // //   ]
    // // },
    // // {
    // //   title: '含新增',
    // //   align: 'center',
    // //   dataIndex: 'sale',
    // //   hideInSearch:true,
    // //   children:[
    //     {
    //       title: '新增数量',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'saleCount',
    //       hideInSearch:true,
    //       render: (_, record) => {
    //         return utils.formatNumber(record.data && record.data.length > 0 ? record.data[0].count : "-");
    //       },
    //     },
    //     {
    //       title: '新增金额',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'saleAmount',
    //       hideInSearch:true,
    //       render: (_, record) => {
    //         return utils.formatNumber(record.data && record.data.length > 0 ? record.data[0].amount : "-");
    //       },
    //     },
    // //   ]
    // // },
    // // {
    // //   title: '含续费',
    // //   align: 'center',
    // //   dataIndex: 'renew',
    // //   hideInSearch:true,
    // //   children:[
    //     {
    //       title: '续费数量',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'renewCount',
    //       hideInSearch:true,
    //       render: (_, record) => {
    //         return utils.formatNumber(record.data && record.data.length > 1 ? record.data[1].count : "-");
    //       },
    //     },
    //     {
    //       title: '续费金额',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'renewAmount',
    //       hideInSearch:true,
    //       render: (_, record) => {
    //         return utils.formatNumber(record.data && record.data.length > 1 ? record.data[1].amount : "-");
    //       },
    //     },
    // //   ]
    // // },
    // // {
    // //   title: '含Token',
    // //   align: 'center',
    // //   dataIndex: 'token',
    // //   hideInSearch:true,
    // //   children:[
    //     {
    //       title: 'Token数量',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'tokenCount',
    //       hideInSearch:true,
    //       render: (_, record) => {
    //         return utils.formatNumber(record.data && record.data.length > 2 ? record.data[2].count : "-");
    //       },
    //     },
    //     {
    //       title: 'Token金额',
    //       align: 'center',
    //       // width:100,
    //       dataIndex: 'tokenAmount',
    //       hideInSearch:true,
    //       render: (_, record) => {
    //         return utils.formatNumber(record.data && record.data.length > 2 ? record.data[2].amount : "-");
    //       },
    //     },
    // //   ]
    // // },
    // // {
    // //   title: '新增渠道',
    // //   align: 'center',
    // //   dataIndex: 'sale',
    // //   hideInSearch:true,
    // //   children:[
    //     {
    //       title: 'googleplay新增',
    //       align: 'center',
    //       dataIndex: '',
    //       hideInSearch:true,
    //       children:[
    //         {
    //           title: '数量',
    //           align: 'center',
    //           // width:60,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 0 ? record.data[0].data[0].count : "-");
    //           },
    //         },
    //         {
    //           title: '金额',
    //           align: 'center',
    //           // width:80,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 0 ? record.data[0].data[0].amount : "-");
    //           },
    //         },
    //       ]
    //     },
    //     {
    //       title: 'appstore新增',
    //       align: 'center',
    //       dataIndex: '',
    //       hideInSearch:true,
    //       children:[
    //         {
    //           title: '数量',
    //           align: 'center',
    //           // width:60,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 1 ? record.data[0].data[1].count : "-");
    //           },
    //         },
    //         {
    //           title: '金额',
    //           align: 'center',
    //           // width:80,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 1 ? record.data[0].data[1].amount : "-");
    //           },
    //         },
    //       ]
    //     },
    //     {
    //       title: 'portal新增',
    //       align: 'center',
    //       dataIndex: '',
    //       hideInSearch:true,
    //       children:[
    //         {
    //           title: '数量',
    //           align: 'center',
    //           // width:60,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 2 ? record.data[0].data[2].count : "-");
    //           },
    //         },
    //         {
    //           title: '金额',
    //           align: 'center',
    //           // width:80,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 0 && record.data[0].data &&  record.data[0].data.length > 2 ? record.data[0].data[2].amount : "-");
    //           },
    //         },
    //       ]
    //     },
    // //   ]
    // // },
    // // {
    // //   title: '续费渠道',
    // //   align: 'center',
    // //   dataIndex: 'sale',
    // //   hideInSearch:true,
    // //   children:[
    //     {
    //       title: 'googleplay续费',
    //       align: 'center',
    //       dataIndex: '',
    //       hideInSearch:true,
    //       children:[
    //         {
    //           title: '数量',
    //           align: 'center',
    //           // width:70,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 0 ? record.data[1].data[0].count : "-");
    //           },
    //         },
    //         {
    //           title: '金额',
    //           align: 'center',
    //           // width:100,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 0 ? record.data[1].data[0].amount : "-");
    //           },
    //         },
    //       ]
    //     },
    //     {
    //       title: 'appstore续费',
    //       align: 'center',
    //       dataIndex: '',
    //       hideInSearch:true,
    //       children:[
    //         {
    //           title: '数量',
    //           align: 'center',
    //           // width:70,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 1 ? record.data[1].data[1].count : "-");
    //           },
    //         },
    //         {
    //           title: '金额',
    //           align: 'center',
    //           // width:100,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 1 ? record.data[1].data[1].amount : "-");
    //           },
    //         },
    //       ]
    //     },
    //     {
    //       title: 'portal续费',
    //       align: 'center',
    //       dataIndex: '',
    //       hideInSearch:true,
    //       children:[
    //         {
    //           title: '数量',
    //           align: 'center',
    //           // width:70,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 2 ? record.data[1].data[2].count : "-");
    //           },
    //         },
    //         {
    //           title: '金额',
    //           align: 'center',
    //           // width:100,
    //           dataIndex: '',
    //           hideInSearch:true,
    //           render: (_, record) => {
    //             return utils.formatNumber(record.data && record.data.length > 1 && record.data[1].data &&  record.data[1].data.length > 2 ? record.data[1].data[2].amount : "-");
    //           },
    //         },
    //       ]
    //     },
    // //   ]
    // // },
  ];

  let childrenColumns: ProColumns<API.RetainStat>[] = [
    // {
    //   title: '名称',
    //   dataIndex: 'title',
    //   width: 210,
    // },
    // {
    //   title: '新增',
    //   align: 'center',
    //   dataIndex: 'count',
    //   renderText: (val) => {
    //     return utils.formatNumber(val);
    //   },
    // },
    // {
    //   title: '1日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 0, record.count ?? 1);
    //   },
    // },
    // {
    //   title: '2日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 1, record.count ?? 1);
    //   },
    // },
    // {
    //   title: '3日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 2, record.count ?? 1);
    //   },
    // },
    // {
    //   title: '4日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 3, record.count ?? 1);
    //   },
    // },
    // {
    //   title: '5日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 4, record.count ?? 1);
    //   },
    // },
    // {
    //   title: '6日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 5, record.count ?? 1);
    //   },
    // },
    // {
    //   title: '7日留存',
    //   dataIndex: '',
    //   align: 'center',
    //   hideInSearch:true,
    //   render: (_, record) => {
    //     return displayCount(record?.days, 6, record.count ?? 1);
    //   },
    // },
  ];

  return (
    <PageContainer>
      <ProTable<API.RetainStat>
        rowKey="title"
        actionRef={actionRef}
        formRef={formRef}
        options={{
          fullScreen: false,
          reload: false,
          // setting: false,
          density: false,
          // search:true,
          // setting: {
          //   listsHeight: 500,
          // },
        }}
        // loading={dataLoading}
        // search={{
        //   // labelWidth: 80,
        //   defaultCollapsed: false,
        //   span: 4,
        // }}
        search={false}
        pagination={false}
        columns={columns}
        columnsState={undefined}
        // scroll={{ x: 'calc(700px + 50%)', y: 700 }}
        // expandable={{
        //   expandedRowRender: (record, index, indent, expanded) => {
        //     return <p style={{ margin: 0 }}>{record.title},{index},{indent},{expanded}</p>
        //   },
        // }}
        // columnsState={{
        //   value: columnsStateMap,
        //   onChange: setColumnsStateMap,
        // }}
        // expandable={{
        //   expandedRowRender: (record) => (
        //     <ProTable
        //       columns={childrenColumns}
        //       headerTitle={false}
        //       search={false}
        //       options={false}
        //       dataSource={record.countrys}
        //       tableStyle={{ marginLeft: 10 }}
        //       pagination={false}
        //     />
        //   ),
        //   defaultExpandedRowKeys: ['0'],
        // }}
        toolbar={{
          filter: (
            <>
              <Space
                style={{
                  marginRight: '0px',
                }}
              ></Space>
            </>
          ),
          // menu: {
          //   type: 'tab',
          //   activeKey: productId,
          //   items: productMenuItems,
          //   onChange: (tabKey) => {
          //     setProductId(tabKey as string);
          //   },
          // },
        }}
        // dataSource={monitorData?.data}
        // params={{
        //   // registBegin:'2023-4-20',
        //   // registEnd:'2023-4-25'api.retainStat
        // }}
        request={loadData}
      />
    </PageContainer>
  );
};

export default VpnGroupTreeList;
